<template>
	<div class="activiesBar" ref="activities" style="margin-left: 0px;"><!--{{saleType.coupon[0]}}-->
		<span class="package" style="float: left;width:14%;display:inline-block" v-if="coupons&&coupons.length>0">领券</span>
		<div class="activiesBardiv">
			<div style="float:left;width:81%;text-align: left;height: 1.05rem;">
				<banner style="width:100%; height: 100%; position:relative;" :bounce="true">
					<ul class="title">
						<li class="couponsspan" v-for="(val,index) in coupons" v-if="val">
							<span v-if="val.fullElement">
							<span>满{{val.fullElement}}</span><span v-if="val.couponAmount">减{{val.couponAmount}}</span><span v-if="val.couponDiscount">享{{val.couponDiscount}}折</span>
							</span>
							<span v-if="!val.fullElement && val.couponAmount">立减{{val.couponAmount}}</span>
							<span v-if="!val.fullElement && val.couponDiscount">立享{{val.couponDiscount}}折</span>
						</li>
					</ul>
				</banner>
			</div>
		</div>
		<span style="float: right;width:5%;display:inline-block;background-color: #fff;" v-if="coupons&&coupons.length>0">
			<i style="font-size: 0.7rem;color: #ccc;" class="icon njfont nj-youjiantou"></i>
		</span>
	</div>
</template>
<script>
	import Vue from "vue";
	import axios from "axios";
	import { Toast } from "@/utils/toast.js";
	import { mapState, mapGetters, mapMutations } from 'vuex';
	import Banner from '../../components/BannerScroll';
	export default {
		props: {
			coupons: {
				type: Array,
				default: []
			},
		},
		components: {
			Banner
		},
		computed: {
			...mapGetters('wxh', {
				login: "login",
				userInfo: 'userInfo',
				sessionId: 'sessionId'
			}),
		},
		data() {
			return {
				saleType: {
					"buyPresent": ["赠", "buyPresent"],
					"specialOffer": ["特", "specialOffer"],
					"discount": ["折", "discount"],
					"overBuy": ["多", "overBuy"],
					"rebate": ["返", "rebate"],
					"fullCut": ["减", "fullCut"],
					"fullDiscount": ["满", "fullDiscount"],
					"package": ["组", "package"],
					"coupon": ["券", "coupon"]
				},
			}
		},
		computed: {

		},
		methods: {

		},
		created() {

		},
		mounted() {

		},
		beforeDestroy() {

		},
		watch: {
			coupons(newVal) {
				console.log(newVal, "coupons");
			}
		}

	}
</script>

<style scoped>
	.activiesBar {
		height: 1.1rem;
		margin-left: .7rem;
		transition: .5s all;
		overflow: hidden;
		padding: 0.1rem 0rem;
		position: relative;
	}
	.activiesBardiv{
		
	}
	.package {
		/*font-size: 12px;*/
		/*background: #EF5423;*/
		/*padding: 0 2px;*/
		/*margin-top: 3px;*/
		color: #ABABAB;
	}
	
	.title {
		min-width: 100%;
		position: relative;
		float: left;
		height: 1.1rem;
		display: flex;
	}
	/*券的样式*/
	
	.activiesBar .title .couponsspan {
		display: inline-block;
		height: 20px;
		width: 5rem;
		text-align: center;
		background-color: #EF5423;
		color: #fff;
		margin-left: 0.5rem;
		line-height: 20px;
		padding: 0px 0.5rem;
		position: relative;
	}
	.activiesBar .title .couponsspan:nth-child(1){
		margin-left: 0;
	}
	.activiesBar .title .couponsspan::after,
	.activiesBar .title .couponsspan::before {
		content: "";
		position: absolute;
		width: 0.5rem;
		height: 0.5rem;
		background: #FFF;
		border-radius: 100%;
		right: -0.3rem;
		top: 0.25rem;
		-webkit-transform: rotateZ(-45deg);
		transform: rotateZ(-45deg);
	}
	
	.activiesBar .title .couponsspan::before {
		top: 0.25rem;
		left: -0.3rem;
	}
</style>